{extend name="layout/layout" /}

{block name="style"}
	<style>
		.goods-list{
			background: #fff;
		}

		.goods-list div{
			display: flex;
		}

		.goods-item{
			width: 100%;
			height: 100px;
			padding: 10px;
			border-bottom: 1px solid #eee;
		}

		.goods-item .img{
			width: 80px;
			height: 80px;
			margin-right: 10px;
			flex-shrink: 0;
		}
		.goods-item .img img{
			max-width: 100%;
			max-height: 100%;
		}

		.goods-item .goods-info{
			flex: 1;
		}

		.goods-info{
			flex-direction: column;
			overflow:hidden;
		}

		.goods-info .title{
			width: 100%;
			overflow: hidden;
			margin-bottom: 5px;
			display: block;
		}

		.goods-info .info{

		}

		.rebate-amount, .coupon{
			flex-direction: column;
		}

		.rebate-amount{
			
			flex-direction: row;
			width: auto;
		}

		.rebate-amount>span{
			padding: 1px 10px;
			font-size: 10px;
		}

		.commission-title{
			background: #E27095;
			color: #fff;
			border-radius: 3px 0 0 3px;
		}

		.commission{
			background: #fff;
			color: #E27095;
			border: 1px solid #E27095;
			border-radius: 0 3px 3px 0;
		}

		.info .amount{
			flex: 1;
			flex-direction: column;
		}

		.coupon{
			background: #F35758;
			color: #fff;
			font-size: 12px;
			border: 1px solid #F35758;
			border-radius: 4px;
			width: 80px;
		}

		.coupon>div{
			padding: 1px 5px;
			justify-content: center;
			font-size: 10px;
		}

		.less-amount{
			background: #fff;
			color:#F35758 ;
			border-radius: 0 0 4px 4px;
		}

		.goods-amount{
			color: #FC8A46;
			font-size: 14px;
			align-items: baseline;
		}
		.goods-amount del{
			color: #8f8f94;
			font-size: 12px;
		}

		.search{
			margin:5px 0;
			background: #fff;
		}


		.search{
			padding: 10px;
		}

		.search input{
			margin: 0;
			padding: 0 15px;
			border-radius: 0;
			border-right: 0;
			font-size: 12px;
		}

		.search-icon{
			height: 40px;
			border: 1px solid rgba(0,0,0,.2);
			line-height: 40px;

		}
	</style>
{/block}

{block name="main"}
	<div class="jd mui-row" v-cloak>
		<div class="category"></div>
		<div class="search mui-row">
			<div class="input-box mui-col-xs-10">
				<input type="text" id="keyword" v-model="keyword" autofocus="autofocus" placeholder="请粘贴商品分享链接" >
			</div>
			<div class="mui-col-xs-2 mui-text-center search-icon">
				<a class="mui-icon mui-icon-search" href="javascript:;" @tap="search()"></a>
			</div>
		</div>

		<div class="list">
			<div class="box">
				<div class="goods-list">
				    <div class="goods-item" v-for="item in list" @tap="cofirm_acount(item)">
				    	<div class="img">
				    		<img :src="item.imgUrl" alt="">
				    	</div>
				    	<div class="goods-info">
				    		<div class="title mui-ellipsis">{{item.logTitle}}</div>
				    		<div class="info">
				    			<div class="amount">
				    				<div class="rebate-amount">
				    					<span class="commission-title">佣金</span>
				    					<span class="commission">{{item.commission}}</span>
				    				</div>
				    				<div class="goods-amount">￥{{(item.logUnitPrice-item.couponAmount).toFixed(2)}} &nbsp;&nbsp;<del v-if="item.couponAmount > 0">>￥{{item.logUnitPrice}}</del></div>
				    			</div>
				    			<div class="coupon" v-if="item.couponAmount > 0">
				    				<div class="get-coupon">立即领券</div>
				    				<div class="less-amount">立减{{item.couponAmount}}元</div>
				    			</div>
				    		</div>
				    	</div>
				    </div>	
				</div>
			</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>


		var indexVue = new Vue({
			el:'.jd',
			data: {
				keyword: '',
				list: [],
				page:1,
				nextPage: false
			},
			mounted: function(){
                if(!token){
                    location.href = '/mobile/user/login';
                }
				this.getGoods();
			},
			methods: {
				//获取商品列表
				getGoods: function(){
					var that = this;
					var keyword = this.keyword;
					console.log(keyword);
					var url =  'jd/getRecommendGoods';
					request(that, {'url': url, 'data': {'keyword':keyword, 'page': that.page}}, function(res){
						if(res.code == 200) {
							that.list = that.list.concat(res.data);
							that.page++;
							if(res.data.length < 100) {
								that.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},

                //搜索
                search: function(){
                    var keyword = this.keyword;
                    this.page = 1;
                    this.list = [];
                    this.nextPage = false;
                    if(!keyword){
                    	this.getGoods();
                    } else {
                    	this.searchGoods();
                    }

                    
                },
                searchGoods: function(){
					var keyword = this.keyword;
                    var that = this;
                    layer.open({type: 2});
                    request(that, {'url': 'jd/search', 'data': {'goods_url':keyword}}, function(res){
						if(res.code == 200) {
							that.list.push(res.data);
						} else {
							mui.toast(res.msg);
						}	
					});
                },

                toDetail: function(id) {
                	location.href = '/mobile/pdd/detail/id/'+id;
                },

                //领券
                cofirm_acount: function(item) {
                	var that = this;
                	mui.confirm('确认兑换该优惠券吗？', '提示', ['取消', '兑换'], function(e) {
	                    if (e.index == 1) {
	                    	request(that, {'url': 'jd/exchangeCoupon', 'data': {id: item.id}}, function(res){
								if(res.code == 200) {
									mui.alert(res.msg, function(){
										location.href = res.data.url;
									})
								} else {
									mui.toast(res.msg);
								}	
							});
	                    }
	                })
                }
			}
		});
	</script>
{/block}
